<template>
  <a-spin class="trend_chart_wrapper" :spinning="loading">
    <div class="title_wrapper">
      <i class="point"></i>
      <span class="title_text">近一月各医院得分趋势</span>
    </div>
    <div class="chart" id="trendChart"></div>
  </a-spin>
</template>

<script>
import { Chart } from '@antv/g2/lib/index'
import { scoreTrend } from '@/api/home'
export default {
  props: {},
  data () {
    return {
      loading: false,
      chartData: [],
      chart: null
    }
  },
  components: {},
  computed: {},
  watch: {
    'chartData': {
      handler (val) {
        console.log(val)
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart () {
      if (!this.chart) {
        this.chart = new Chart({
          container: 'trendChart',
          autoFit: true,
          height: 346,
          padding: [60, 30, 40, 30]
        })
      }
      this.chart.data(this.chartData)
      this.chart.legend({
        position: 'top',
        marker (x, y, r) {
          return [
            [ 'M', x - r, y ],
            [ 'L', x + r, y ]
          ]
        }
      })
      this.chart.line().position('date*ruleScore').color('orgName').size(3).shape('smooth')
      // this.chart.line().position('date*value').color('#0961FF').size(3).shape('smooth');
      // this.chart.area().position('date*value').shape('smooth').color('#0961FF');
      this.chart.render()
    },
    requestChartData () {
      this.loading = true
      scoreTrend().then((res) => {
        console.log(res)
        if (res.code === 200 && res.data && Array.isArray(res.data)) {
          this.chartData = res.data
        }
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.requestChartData()
  },
  beforeMount () {},
  mounted () {},
  activated () {}
}
</script>

<style scoped lang="less">
.trend_chart_wrapper{
  width: 100%;
  height:390px;
  background:rgba(255,255,255,1);
  box-shadow:0px 3px 10px 0px rgba(95,122,151,0.13);
  border-radius:4px;
  overflow: hidden;
  margin-top: 20px;
  padding: 0 42px;
  .title_wrapper{
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
  .point{
    width:7px;
    height:7px;
    background:rgba(0,131,255,1);
    border-radius:50%;
  }
  .title_text{
    margin-left: 12px;
    font-size:16px;
    font-weight:bold;
    color:#666666;
  }
  .chart{
    width: 100%;
    height: 346px;
  }
}
</style>
<style lang="less">
.trend_chart_wrapper{
  .ant-spin-container{
    width: 100%;
  }
}
</style>
